<template>
	<view class="login-container">
		<view class="logo">
			<image src="../../static/images/logo/logo.jpg"></image>
		</view>
		<!-- 勾选用户协议思路：给两个"微信一键登录"按钮
				1.ischeked=true勾选了，就获取用户信息open-type="getPhoneNumber"
				2.ischecked=false没勾选，给点击事件提示"请先阅读并勾选用户协议"-->
		<block v-if="ischecked">
			<button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
				class="btn-login">微信一键登录</button>
		</block>
		<block v-else>
			<button type="primary" class="btn-login" @click="btn_Select">微信一键登录</button>
		</block>

		<view class="agreement">
			<radio class="ck_radio" color="#3ea2ff" :checked="ischecked" @click="ischecked=!ischecked" />
			<!-- @click="ischecked=!ischecked"的作用能让单选按钮可以点击"勾选也可以取消"，不加这句单选按钮只能勾选"取消不了" -->
			<text class="tips">我已阅读并同意</text>
			<navigator class="info" url="/subpkg/agreement/agreement">《用户协议》</navigator>
		</view>
		<!-- <ad unit-id="adunit-c5853812bc5dd2e1"></ad> -->
	</view>
</template>
<script>
	var _this;
	import {http} from '@/utils/http.js'
	import { mapMutations } from 'vuex'
	export default {
		name: "my-login",
		data() {
			return {
				// 单选按钮的勾选
				ischecked: false,
				jsCode: '',
				phone: '',
				encryptedData: '',
				rawData: '',
				signature: '',
				iv: '',
				inviteId:''

			};
		},

		created() {
			_this = this;
		},
		onLoad(options) {
			// console.log(options.scene)
			wx.hideHomeButton(); 
			this.inviteId=options.scene||null
			this.getlogin()
		},
		methods: {
			...mapMutations('m_user', ['updateToken']),
			getPhoneNumber(e) { // 获取手机号
				// console.log(e)
				var phoneCode = e.detail.code;
				if (phoneCode == undefined) {
					uni.showToast({
						icon: "none",
						title: "请重新授权",
						duration: 2000,
						position: 'bottom'
					})
				} else {
					// 获取请求后端解析手机号
					// console.log(1122, _this.jsCode)
					http({
						url: '/wx/auth/getPhoneNumber',
						method: "POST",
						data: {
							jsCode: _this.jsCode,
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv
						}
					}).then(res => {
						if (res.code == 200) {
							_this.phone = res.data.phoneNumber
							uni.login({
								success: (res => {
									_this.jsCode = res.code
									uni.showModal({
										title: "提示",
										content: '是否已阅读并同意小程序的《隐私条款》与《用户协议》',
										success: res => {
											if (res.confirm) {
												uni.getUserProfile({
													desc: '用于完善用户信息',
													success: (res) => {
														_this
															.encryptedData =
															res
															.encryptedData
														_this.rawData = res
															.rawData
														_this.signature =
															res.signature
														_this.iv = res.iv
														// 获取用户的token
														_this
															.getUserInform()
													},
													//获取用户信息
												})
											} else if (res.cancel) {
												//用户点击了取消登录，重新获取code
												_this.getCode();
											}
										},
										fail: res => {
											//第二次tonken获取失败//重新获取code
											uni.showToast({
												title: '服务器异常',
												icon: 'none',
												duration: 2000,
												position: 'bottom'
											});
											_this.getCode();
										}
									})
								})
							})
						}
					})
				}
			},
			// 登录判断函数
			getlogin() {
				// 获取第一个jsCode用于获取用户电话信息
				// 判断是否有token 如果有直接跳转到首页
				let token = uni.getStorageSync('token')
				if (!token||token=="") {
					// 如果token不存在,获取一个code
					this.getCode();
				} else {
					token=JSON.parse(token)
					if (Date.now() - token.time > 432000000) {
						//token 过期获取一个code
						this.getCode();
					}else {
						// 直接跳转到首页
						wx.switchTab({
							url: '../../pages/home/home'
						})
					}
				}
			},
			//获取一个jscode
			getCode() {
				uni.login({
					success: (res => {
						_this.jsCode = res.code
					})
				})
			},
			getUserInform() {
				let that=this
				http({
					url: '/wx/auth/login',
					method: 'POST',
					data: {
						jsCode: _this.jsCode,
						encryptedData: _this.encryptedData,
						rawData: _this.rawData,
						signature: _this.signature,
						iv: _this.iv,
						phone: _this.phone,
						inviteId:_this.inviteId
					},
				}).then(res => {
			  // 成功获取token存入缓存数据库中
					if (res.data.code != 500) {
						uni.setStorageSync('token', JSON.stringify({
							time: Date.now(),
							data: res.data
						}))
						// 更新token
						that.updateToken({
							time: Date.now(),
							data: res.data
						});
						wx.switchTab({
							url: '../../pages/home/home',
						})
					} else {
						uni.showToast({
							title: '登录异常重新登录',
							icon: 'none',
							duration: 2000,
							position: 'bottom'
						});
						_this.getCode()
					}

				}, err => {
					uni.showToast({
						title: '服务器异常',
						icon: 'none',
						duration: 2000,
						position: 'bottom'
					});
					_this.getCode()
				})
			},
			// 点击按钮弹出勾选用户协议
			btn_Select() {
				uni.showToast({
					title: '请先阅读并勾选用户协议',
					icon: 'none',
					duration: 3000,
					position: 'bottom'
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
	.login-container {
		display: flex;
		flex-direction: column;
		padding-top: 346rpx;
		align-items: center;
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		background-color: #FFFFFF;

		.logo {
			width: 160rpx;
			height: 160rpx;
			background: #FFFFFF;
			box-shadow: 0px 2px 20px 2px rgba(62, 162, 255, 0.25999999046325684);
			border-radius: 24rpx;
		}

		.logo image {
			width: 100%;
			height: 100%;
			border-radius: 24rpx;
		}

		.btn-login {
			position: relative;
			margin-top: 144rpx;
			padding-left: 60rpx;
			width: 574rpx;
			height: 96rpx;
			font-size: 32rpx;
			line-height: 96rpx;
			border-radius: 25px;
			background-color: #3ea2ff;
		}

		.btn-login::before {
			position: absolute;
			content: '';
			top: 24rpx;
			left: 140rpx;
			width: 48rpx;
			height: 48rpx;
			background-size: 100% 100%;
		}

		.agreement {
			display: flex;
			margin-top: 300rpx;
			font-size: 24rpx;
			align-items: center;

			.ck_radio {
				vertical-align: middle;
				transform: scale(0.7);
			}

			.tips {
				margin-left: 5rpx;
			}

			.info {
				color: #3ea2ff;
			}
		}
	}
</style>
